<template>
    <el-form-item 
        :required="required" 
        :label-width="labelWidth">
        <template #label>
            <div style="display: flex; justify-content: flex-start; align-items: center;">
                <div>
                    {{ label }}
                </div>
                <el-popover
                    v-if="help"
                    title="帮助提示"
                    :content="help"
                    width="500px"
                    placement="top">
                    <template #reference>
                        <el-icon size="16" style="padding-left: 3px;"><Warning /></el-icon>
                    </template>
                </el-popover>
            </div>
        </template>
        <el-switch 
            :active-value="active"
            :inactive-value="inactive"
            @update:modelValue="inputValues"
            :model-value="modelValue" />
    </el-form-item>
</template>
<script>
export default {
    props: {
        // 标签名称
        label: {
            type: String,
            default: ''
        },
        // 标签宽度
        labelWidth: {
            type: String,
            default: '120px'
        },
        // 帮助信息，显示在左侧label旁边出现一个帮助图标
        help: {
            type: String,
            default: ''
        },
        // 绑定的输入值信息
        modelValue: {
            type: [String, Number, Boolean, Array, Object, null],
            default: ''
        },
        // 是否显示必填的红色星号*
        required: {
            type: Boolean,
            default: false
        },
        // 选中时绑定的值 默认为1
        active:{
            type: [Boolean, String, Number, Array, Object, null],
            default: 1
        },
        // 未选中时绑定的值 默认为0
        inactive: {
            type: [Boolean, String, Number, Array, Object, null],
            default: 0
        },
    },
    emits: ['update:modelValue'],
    methods: {
        inputValues($event) {
            if(this.numeric){
                $event = parseFloat($event)
            }
            this.$emit('update:modelValue', $event)
        },
    },
}
</script>